﻿function FrameControl($frameControl) {
	var $this = this;
	var $framesList = $frameControl.find("ul.full-size");

	function resizeImage($image) {
		var frameAspect = $frameControl.width() / $frameControl.height();
		var imageAspect = $image.data("aspectRatio");

		if (imageAspect / frameAspect > 1)
			$image.css({	width: "100%", height: null	});
		else
			$image.css({	width: null, height: "100%"	});
	};

	function updateSizes() {
		$frameControl.width($(window).width());
		$frameControl.height($(window).height());
		$("li > img", $framesList).each(function () { resizeImage($(this)); });
	};

	this.scrollToFrame = function (index) {
		$framesList.animate({ left: -100 * index + "%" }, 1000);
	};

	this.load = function (photos) {
		$framesList.empty();
		$framesList.css({ width: 100.01 * photos.length + "%" });
		$.each(photos, function (i, item) {
			var $image = $("<img src='" + item.src + "' alt=''/>");
			var $frame = $("<li></li>");

			$frame.css({ width: 100 / photos.length + "%" });
			$frame.append($image);
			$framesList.append($frame);

			$image.data("aspectRatio", item.width / item.height);
		});
		updateSizes();
	};

	$(window).resize(updateSizes);
}
